<template>
	<div class="app-container">
		<el-form :inline="true" :model="queryParams" label-width="80px" ref="queryForm" size="small" v-show="showSearch">

			<el-form-item label="创建时间">
				<el-date-picker end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" style="width: 240px"
								type="daterange" v-model="daterangeCreateTime" value-format="yyyy-MM-dd"/>
			</el-form-item>

			<el-form-item>
				<el-button @click="handleQuery" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
				<el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">

			<!-- 按键功能 -->

			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table :data="auditList" v-loading="loading">
			<el-table-column align="center" type="selection" width="55"/>
			<el-table-column align="center" label="主键"      prop="id"/>
			<el-table-column align="center" label="套餐名称"   prop="serviceItemName"/>
			<el-table-column align="center" label="套餐备注"   prop="serviceItemInfo" show-overflow-tooltip/>
			<el-table-column align="center" label="套餐价格"   prop="serviceItemPrice"/>
			<el-table-column align="center" label="流程实例id" prop="instanceId"/>
			<el-table-column align="center" label="创建者"     prop="creator.nickName"/>
			<el-table-column align="center" label="备注"      prop="info"/>

			<el-table-column align="center" label="状态" prop="status">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.cp_audit_status" :value="scope.row.status"/>
				</template>
			</el-table-column>

			<el-table-column align="center" label="创建时间" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
				<template slot-scope="scope">
					<el-button
						@click="handleUpdate(scope.row)"
						icon="el-icon-s-check"
						size="mini"
						type="text"
						v-hasPermi="['workflow:audit:edit']">审批历史</el-button>

					<el-button
						v-if="scope.row.status === 0"
						@click="handleViewImage(scope.row)"
						icon="el-icon-search"
						size="mini"
						type="text"
						v-hasPermi="['workflow:audit:resource']">查看进度</el-button>

					<el-button
						v-if="scope.row.status === 0"
						@click="handleCancel(scope.row)"
						icon="el-icon-folder-delete"
						size="mini"
						type="text"
						v-hasPermi="['workflow:audit:remove']">撤销审批</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			:limit.sync="queryParams.pageSize"
			:page.sync="queryParams.pageNum"
			:total="total"
			@pagination="getList"
			v-show="total>0"/>

		<el-dialog :visible.sync="bpmnImageDialog" append-to-body title="流程图" width="1200px">
			<div v-html="currentBpmnImage"/>
		</el-dialog>
	</div>
</template>

<script>
	import {cancel, listAudit, getProcessingImage} from "../../../api/workflow/audit";

	export default {
		name: "Audit",
		dicts: ['cp_audit_status'],
		data() {
			return {
				bpmnImageDialog: false,
				// 当前 流程定义 的 图片数据
				currentBpmnImage: null,

				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 套餐审核表格数据
				auditList: [],
				// 创建时间时间范围
				daterangeCreateTime: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					params: {}
				},
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询套餐审核列表 */
			getList() {
				this.loading = true;
				this.queryParams.params = {};
				if (null != this.daterangeCreateTime && '' !== this.daterangeCreateTime) {
					this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
					this.queryParams.params["endCreateTime"]   = this.daterangeCreateTime[1];
				}
				listAudit(this.queryParams).then(response => {
					this.auditList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},

			// 取消按钮
			cancel() {
				this.reset();
			},

			// 表单重置
			reset() {
				this.form = {
					id: null,
					serviceItemName: null,
					serviceItemInfo: null,
					serviceItemPrice: null,
					instanceId: null,
					creatorId: null,
					info: null,
					status: 0,
					createTime: null
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.daterangeCreateTime = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			/** 审批历史操作 */
			handleUpdate(row) {
				console.log('审批历史操作')
			},
			/** 撤销按钮操作 */
			handleCancel(row) {
				this.$modal.prompt('是否确认这条审核记录, 如果确认请输入撤销理由？').then(function (data) {
					return cancel(row.id, data.value);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("撤销成功");
				}).catch(() => {});
			},
			/** 查看流程进度 */
			handleViewImage(row) {
				getProcessingImage(row.instanceId).then(res => {
					this.currentBpmnImage = res
					this.bpmnImageDialog = true
				})
			},
		}
	};
</script>
